<template>
  <div>
    <h1>【aty-row】 component demo</h1>
    <p>【aty-row】 本质</p>
    <aty-row />
    <div class="fd-row-box">
      <h2>flex下type必须指定为flex,然后才能设置 align 和 justify</h2>
      <h3>1. align属性：flex 布局下的垂直对齐方式</h3>
      <aty-title level="5" text="top" />
      <aty-row class="fd-top" type="flex" align="top" justify="start">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="middle" />
      <aty-row class="fd-top" type="flex" align="middle" justify="start">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="bottom" />
      <aty-row class="fd-top" type="flex" align="bottom" justify="start">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <h3>2. justify:flex 布局下的水平排列方式</h3>
      <aty-title level="5" text="start" />
      <aty-row type="flex" align="top" justify="start">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="center" />
      <aty-row type="flex" align="top" justify="center">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="end" />
      <aty-row type="flex" align="top" justify="end">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="space-between" />
      <aty-row type="flex" align="top" justify="space-between">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
      <aty-title level="5" text="space-around" />
      <aty-row type="flex" align="top" justify="space-around">
        <aty-col span="3" />
        <aty-col span="3" />
      </aty-row>
    </div>

  </div>
</template>
<script>
//  import { Alert, Icon } from 'Artery';
export default {
  //  components: { Alert, Icon }
}
</script>
<style  lang="less"  type="text/less" >
        .fd-row-box {
            padding:5px;
            .aty-row {
                margin: 5px;
                border: 1px solid #d7dde4;
            }

            .aty-col {
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 30px;
                background-color: #3399ff;

            }

            .fd-top {
                height: 60px;
            }
        }

</style>
